<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>product_regular</title>
    <link rel="stylesheet" href="./css/mui.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body class="max-width">
    <header id="header" class="mui-bar mui-bar-nav max-width">
        <a class="icon mui-icon-item mui-pull-left"></a>
        <div class="mui-title"><img src="./img/logo.png"></div>
        <a class="icon mui-icon-cart mui-pull-right" number="2"></a>
    </header>
    <div class="mui-content">
        <div id="slider" class="mui-slider product">
        <div class="mui-slider-group mui-slider-loop">
            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#">
                    <img src="./img/header.png">
                </a>
            </div>
            <!-- 第一张 -->
            <div class="mui-slider-item">
                <a href="#">
                    <img src="./img/header.png">
                </a>
            </div>
            <!-- 第二张 -->
            <div class="mui-slider-item">
                <a href="#">
                    <img src="./img/header.png">
                </a>
            </div>
            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#">
                    <img src="./img/header.png">
                </a>
            </div>
        </div>
        <div class="mui-slider-indicator">
            <div class="mui-indicator mui-active"></div>
            <div class="mui-indicator"></div>
        </div>
        </div>
        <div class="product-detail">
            <div class="basic-info">
                <div class="desc">馬克杯</div>
                <div class="price">￥79</div>
            </div>

            <div id="slider" class="mui-slider desc-info">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item desc-info-title desc-title" href="#item1mobile">產品規格</a>
					<a class="mui-control-item desc-info-title desc-title" href="#item2mobile">商家資訊</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar desc-line mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active item-desc-1">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll desc-contain">
								<div id="slider" class="mui-slider product">
                                    <div class="mui-slider-group mui-slider-loop">
                                        <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                                        <div class="mui-slider-item mui-slider-item-duplicate">
                                            <a href="#">
                                                <img src="./img/img1.png">
                                            </a>
                                        </div>
                                        <!-- 第一张 -->
                                        <div class="mui-slider-item">
                                            <a href="#">
                                                <img src="./img/img1.png">
                                            </a>
                                        </div>
                                        <!-- 第二张 -->
                                        <div class="mui-slider-item">
                                            <a href="#">
                                                <img src="./img/img1.png">
                                            </a>
                                        </div>
                                        <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                                        <div class="mui-slider-item mui-slider-item-duplicate">
                                            <a href="#">
                                                <img src="./img/img1.png">
                                            </a>
                                        </div>
                                    </div>
                                    <div class="mui-slider-indicator">
                                        <div class="mui-indicator mui-active"></div>
                                        <div class="mui-indicator"></div>
                                    </div>
                                </div>
                                <div class="desc-1"> 
                                    發揮創意，打造屬於你或你們的馬克杯。 </br>
                                    想要擁有自己獨有設計的杯款，或與另一半、家人、朋友們成對的紀念對杯，</br>
                                    現在上傳最愛的圖片加上你的創意，專屬你們的紀念 commandp 我印 幫你印！</br>
                                </div>
                                <div class="desc-text">
                                    - 熱昇華壓燙技術，色彩鮮明持久 </br>
                                    - 可使用於洗碗機及微波爐</br>
                                    材質：陶瓷 </br>
                                    尺寸：高90mm， 直径：75mm</br>
                                </div>                    
                            </div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content item-desc-1">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll desc-contain">
                                <div class="desc-1"> 
                                    我是商家资讯部分</br>
                                    發揮創意，打造屬於你或你們的馬克杯。 </br>
                                    想要擁有自己獨有設計的杯款，或與另一半、家人、朋友們成對的紀念對杯，</br>
                                    現在上傳最愛的圖片加上你的創意，專屬你們的紀念 commandp 我印 幫你印！</br>
                                </div>
                                <div class="desc-text">
                                    - 熱昇華壓燙技術，色彩鮮明持久 </br>
                                    - 可使用於洗碗機及微波爐</br>
                                    材質：陶瓷 </br>
                                    尺寸：高90mm， 直径：75mm</br>
                                </div> 
							</div>
						</div>
					</div>
				</div>
			</div>
            
            <div class="may-like">
                <div class="like-text">猜你喜歡</div>
                <ul class="mui-table-view mui-grid-view list-2">
                <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="#">
                        <img class="mui-media-object" src="./img/list-1.png">
                        <div class="mui-media-body">
                            <div class="list-2-tit">手機磨砂硬殼</div>
                            <div class="list-2-price">￥79-100</div>
                        </div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="#">
                        <img class="mui-media-object" src="./img/list-1.png">
                        <div class="mui-media-body">
                            <div class="list-2-tit">手機磨砂硬殼</div>
                            <div class="list-2-price">￥79-100</div>
                        </div>
                    </a>
                </li>
            </ul>
            </div>
            <button id="btn-buy" class="btn-buy max-width">加入購物車</button>
        </div>
    </div>

    <!-- 导航菜单 -->
    <div id="menu-list" class="menu-list max-width">
        <div class="mui-table-view">
            <a class="mui-table-view-cell menu-home">首頁</a>
            <a class="mui-table-view-cell menu-search">訂單查詢</a>
            <a class="mui-table-view-cell menu-contact">聯絡客服</a>
        </div>
        <div class="backdrop max-width"></div>
    </div>

    <!-- 编辑对话框 -->
    <div id="edit-dialog" style="display: none;" class="edit-dialog max-width">
        <!-- close -->
        <div class="btn-close">＋</div>
        <!-- slider -->
        <div id="edit-dialog-slider" class="mui-slider">
            <div class="mui-slider-group mui-slider-loop">
                <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                        <img src="./img/banner.png">
                    </a>
                </div>
                <!-- 第一张 -->
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="./img/banner.png">
                    </a>
                </div>
                <!-- 第二张 -->
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="./img/banner.png">
                    </a>
                </div>
                <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                        <img src="./img/banner.png">
                    </a>
                </div>
            </div>
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>
        <!-- content -->
        <div class="edit-dialog-info">
            <div class="con-t">iPhone 手機硬殼</div>
            <div class="con-b">跳動<span>￥100</span></div>
        </div>
        <div class="edit-dialog-cont">
            <div class="tit">尺寸</div>
            <div class="cont">
                <div class="mui-radio">
                    <input type="radio" name="size" value="iPhone 6" checked>
                    <label class="mui-btn btn-chek active">iPhone 6</label>
                </div>
                <div class="mui-radio">
                    <input type="radio" name="size" value="iPhone 6 Plus">
                    <label class="mui-btn btn-chek">iPhone 6 Plus</label>
                </div>
                <div class="mui-radio">
                    <input type="radio" name="size" value="iPhone 7">
                    <label class="mui-btn btn-chek">iPhone 7</label>
                </div>
                <div class="mui-radio">
                    <input type="radio" name="size" value="iPhone7 Plus">
                    <label class="mui-btn btn-chek">iPhone7 Plus</label>
                </div>
                <div class="mui-radio">
                    <input type="radio" name="size" value="Samsung Note 5">
                    <label class="mui-btn btn-chek">Samsung Note 5</label>
                </div>
            </div>
        </div>
        <div class="edit-dialog-cont">
            <div class="tit">款式</div>
            <div class="cont">
                <div class="mui-radio">
                    <input type="radio" name="style" value="設計師款" checked>
                    <label class="mui-btn btn-chek">設計師款</label>
                </div>
                <div class="mui-radio">
                    <input type="radio" name="style" value="訂製款">
                    <label class="mui-btn btn-chek btn-icon"><span class="icon-contain"><img class="icon-img" src="./img/icon.png" alt=""></span>訂製款</label>
                </div>
            </div>
        </div>
        <div class="edit-dialog-cont">
            <div class="tit">数量</div>
            <div class="cont">
                <div class="mui-numbox" data-numbox-step='1' data-numbox-min='0'>
                    <button class="mui-btn mui-numbox-btn-minus" type="button">－</button>
                    <input class="mui-numbox-input" type="number">
                    <button class="mui-btn mui-numbox-btn-plus" type="button">＋</button>
                </div>
            </div>
        </div>

        <div class="edit-btn-group max-width">
            <button id="btn-left-edit" class="btn-left">編輯</button>
            <button id="btn-right-buy" class="btn-right">加入購物車</button>
        </div>
    </div>

    <script src="./js/mui.js"></script>
    <script src="./js/script.js"></script>
</body>
</html> 